import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button, Input, Row, Col } from 'antd';
import classNames from 'classnames';
const InputGroup = Input.Group;
import {fetch} from '../services/fetch'
import { connect } from 'dva';

const SearchInput = React.createClass({
  loadPic(text) {
    var tmp;
    console.log(1231);
    fetch("/api/_search?key="+text+ "&page=0")
      .then(function(res){return res.json()})
      .then(function(data){
        // self.setState({
        //   recommend_user_list: data.data,
        //   recommend_user_loading: false,
        // });
        console.log(data);
        tmp=data;
      });
    return tmp
  },

  getInitialState() {
    return {
      value: '',
      focus: false,
    };
  },
  handleInputChange(e) {
    this.setState({
      value: e.target.value,
    });
  },
  handleFocusBlur(e) {
    this.setState({
      focus: e.target === document.activeElement,
    });
  },
  handleSearch() {
    if (this.props.onSearch) {
      this.props.onSearch(this.state.value);
      // var self=this;
      // this.props.onSearch(self.loadPic(self.state.value));
    }
  },
  render() {
    const { style, size, placeholder } = this.props;
    const btnCls = classNames({
      'ant-search-btn': true,
      'ant-search-btn-noempty': !!this.state.value.trim(),
    });
    const searchCls = classNames({
      'ant-search-input': true,
      'ant-search-input-focus': this.state.focus,
    });
    return (
      <div className="ant-search-input-wrapper" style={style}>
        <InputGroup className={searchCls}>
          <Input style={{height:60}} placeholder={placeholder} value={this.state.value} onChange={this.handleInputChange}
                 onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
          />
          <div className="ant-input-group-wrap">
            <Button style={{fontSize:33}} icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
          </div>
        </InputGroup>
      </div>
    );
  },
});

const  InputZone = ({ photos, dispatch }) => {
  return(
    <SearchInput placeholder="input search text"
                 onSearch={(value)=>{
                   fetch("/api/_search?key="+ value+ "&page=0")
                     .then(function(res){return res.json()})
                     .then(function(data){
                       console.log(12313123131231231);
                       dispatch({
                         type: 'photos/search',
                         payload: data
                       });
                     });
                 }
                 } style={{width:"100%"}}
    />
  )
};


export default connect(({ photos }) => ({
  photos
}))(InputZone);
